<template>
 <view class="search-page">
    <!-- 搜索框 -->
    <view class="topsearch">
      <uni-search-bar v-model="val" @confirm="toList" @input="myInput(val)" cancelButton="none" :radius="40"></uni-search-bar>
    </view>
    <!-- 搜索建议列表 -->
    <view class="thinkList">
      <view @click="toDetail(item.goods_id)" class="item" v-for="(item, index) in thinkList" :key="index">
        <rich-text :nodes="item.goods_name" class="word">
         
        </rich-text>
        <view class="arrow">
          >
        </view>
      </view>
    </view>
    <!-- 搜索历史 -->
    <view class="history">
      <view class="top">
        <view class="left">
          搜索历史
        </view>
        <view class="right">
          <uni-icons @click="delHistory" type="trash" size="20"></uni-icons>
        </view>
      </view>
      <view class="box">
        <view class="item" @click="toList({value:item})" v-for="(item,index) in historyList" :key="index">
          {{item}}
        </view>
      </view>
    </view>
 
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timer:null,
        // 搜索建议列表数据源
        thinkList:[],
        // 清楚搜索框中的文本
        val:'',
        // 搜索历史
        historyList:['小米','电脑','平板','手机'],
        
      };
    },
    onLoad() {
      // 打开页面时获取历史搜索
      this.historyList = uni.getStorageSync('historyList') || []
      console.log('获取',this.historyList);
    },
    methods:{
      // 清除搜索历史记录
      delHistory(){
        uni.showModal({
          title:'提示',
          content:'是否清空搜索历史纪录',
          success:res=>{
            if(res.confirm){
              // 清除storeage中的数据
              uni.removeStorageSync('historyList')
              this.historyList = []
            }
          }
        })
      },
      // 跳转详情
      toList({value}){
        // 将搜索内容保存到搜索历史中去
        this.historyList.unshift(value)
        // 去重
        this.historyList = [...new Set(this.historyList)]
        console.log('historyLisy',this.historyList);
        // 保存到本地
        uni.setStorageSync('historyList',this.historyList)
        // console.log('value',value);
        // 清空搜索列表
        this.thinkList = []
        this.val = []
        uni.navigateTo({
          url:`/pages/list/list?key=${value}`
        })
      },
      // 关键字高亮
      keywordHighLine(text,keyword){
        const reg = new RegExp(keyword,'gi')
        // console.log(text.replace(reg,'<view style="color:red">$&</view>'));
        return text.replace(reg,'<span class="red">$&</span>')
        
      },
      // 跳转到商品详情页面
      toDetail(goods_id){
        uni.navigateTo({
          url:`/pages/goods_detail/main?goods_id=${goods_id}`
        })
        this.thinkList = []
        this.val = ''
      },
      // 获取搜索列表
     async getThinkList(query){
        const {data} = await uni.$http.get('/goods/search',{query:query,
pagenum:1,
pagesize:10})
      const {message,meta} = data
      if(meta.status !== 200) return uni.$showMsg()
      this.thinkList = message.goods
      const newArr = this.thinkList.map(item=>({...item,goods_name:this.keywordHighLine(item.goods_name,this.val)}));
      this.thinkList = newArr
      console.log(this.thinkList,'88');
     
      },
      myInput(val){
        try{
          if(this.timer) clearTimeout(this.timer)
        if (val.trim() === '') return
        this.timer= setTimeout(()=>{
          this.getThinkList(val)
     
        },500)
        
     
        }catch(e){
          //TODO handle the exception
          console.log(e);
        }
        } 
      
    }
  }
</script>

<style lang="scss">
  .search-page {
    .topsearch {
      background-color: #c00000;
    }
    .thinkList {
        .item {
          border-bottom: 1px solid #f1f1f1;
          font-size: 12px;
          height: 80rpx;
          line-height: 80rpx;
          padding: 0 20rpx;
          display: flex;
          justify-content: space-between;
    
          .word {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 95%;
          }
        }
      }

// 搜索历史
    .history{
      font-size: 14px;
      .top{
        padding: 20rpx;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f3f3f3;
      }
      .box{
        display: flex;
        flex-wrap: wrap;
        .item{
          margin-right: 20rpx;
          margin-top: 20rpx;
          padding: 20rpx;
          background-color: #f3f3f3;
        }
      }
    }
  }
.red{
  color: #c00000;
  background-color:#f3f3f3;
  
}
</style>
